<template>
  <div class="wrap">
    <!--会员概览-->
    <div class="overview">
      <div class="oil"> 
        <span>油站：</span>
        <el-select v-model="formData.gasId" placeholder="选择油站" size="small" @change="changeOil">
          <el-option v-for="item in oilStationOptions"  :key="item.gasId" :value="item.gasId" :label="item.gasName">{{item.gasName}}</el-option>
        </el-select>
      </div>
      <div class="header">
        <div class="left"><span>会员概览</span><span>累计会员数{{cumulativeMembers}}</span></div>
        <div  class="right">
          <div>统计时间：</div>
          <el-select v-model="overViewDate.dateMode" placeholder="时间" size="small" class="day" @change="changeOverviewTiem">
            <el-option v-for="item in dayOptions" :label="item.message" :value="item.code" :key="item.code"></el-option>
          </el-select>
          <el-date-picker class="picker" v-if="overViewDate.dateMode === 1" size="small"  :picker-options="pickerOptions" :clearable="false" v-model="overViewDate.dateValue" type="date" placeholder="选择日期" @change="handleOvewviewDay" value-format="yyyy-MM-dd"></el-date-picker>
          <el-date-picker size="small" v-if="overViewDate.dateMode === 2" :disabled="true" v-model="overViewDate.dateSenev" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker size="small" v-if="overViewDate.dateMode === 3" :disabled="true" v-model="overViewDate.dateMon" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker class="picker" v-if="overViewDate.dateMode === 4" size="small" :picker-options="pickerOptionsMon" :clearable="false" type="month" v-model="overViewDate.dateValue" placeholder="选择月" @change="handleOvewviewMon"  value-format="yyyy-MM"></el-date-picker>
        </div>
      </div>
      <div class="card">
        <Card v-for="item in cardOptions" :key="item.id" :item="item" @handleChangeCard="handleChangeCard"/>
      </div>
      <div class="echart">
        <Echart chartId="myline" :seriesData="seriesDataOverview" :xData="xaxisOverview" :titleText="titleOverview"/>
      </div>
    </div>
    <!--会员交易概况-->
    <div class="vip">
      <div class="header">
        <div class="left"><span>会员交易概况</span></div>
        <div  class="right">
          <div>统计时间：</div>
          <el-select v-model="vipDate.dateMode" placeholder="时间" size="small" class="day" @change="changeVipTime">
            <el-option v-for="item in dayOptions" :label="item.message" :value="item.code" :key="item.code"></el-option>
          </el-select>
          <el-date-picker class="picker" v-if="vipDate.dateMode === 1" size="small" :picker-options="pickerOptions" :clearable="false" v-model="vipDate.dateValue" type="date" placeholder="选择日期" @change="handleVipDay" value-format="yyyy-MM-dd"></el-date-picker>
          <el-date-picker size="small" v-if="vipDate.dateMode === 2" :disabled="true"  v-model="vipDate.dateSenev" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker size="small" v-if="vipDate.dateMode === 3" :disabled="true" v-model="vipDate.dateMon" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker class="picker" v-if="vipDate.dateMode === 4" size="small" :picker-options="pickerOptionsMon" :clearable="false" type="month" v-model="vipDate.dateValue" placeholder="选择月" @change="handleVipMon" value-format="yyyy-MM"></el-date-picker>
        </div>
      </div>
      <div class="vip-trade g-flex-c">
        <div class="people g-flex-column-sb">
          <!-- <div class="people-custom">
            <div class="arrowCommon">
              <p><span>访客数</span><span></span>
                <el-tooltip class="item" effect="dark" content="统计时间内，详情详情页面被访问的去重人数，一个人在统计时间范围内访问多次只记为一个" placement="top-start">
                  <span class="why">?</span>
                </el-tooltip>
              </p>
              <p>{{formVip.visitorsNum}}</p>
              <p>
                <span>{{formVip.timeType}}</span>
                <span v-if="formVip.visitorsNumAdd > 0">+{{formVip.visitorsNumAdd}}</span><span v-else>{{formVip.visitorsNumAdd}}</span>
                <img v-if="formVip.visitorsNumAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
                <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
              </p>
            </div>
          </div> -->
          <!-- <div class="people-order">
             <div class="arrowCommon">
              <p>新增会员数</p>
              <p>20300</p>
              <p><span>较前一日</span><span>+30%</span><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt=""></p>
            </div>
             <div class="arrowCommon">
              <p>新增会员数</p>
              <p>20300</p>
              <p><span>较前一日</span><span>+30%</span><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt=""></p>
            </div>
             <div class="arrowCommon">
              <p>新增会员数</p>
              <p>20300</p>
              <p><span>较前一日</span><span>+30%</span><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt=""></p>
            </div>
          </div> -->
          <div class="people-pay">
            <div class="arrowCommon">
              <p><span>支付人数</span><span></span>
                <el-tooltip class="item" effect="dark" content="统计时间内，下单并且支付成功的客户数，一人多次付款记为一人,（不剔除退款订单）" placement="top-start">
                  <span class="why">?</span>
                </el-tooltip>
              </p>
              <p>{{formVip.payersNum}}</p>
              <p>
                <span>{{formVip.timeType}}</span>
                 <el-tooltip class="item" effect="dark"  placement="top-start">
                  <div slot="content">{{formVip.payersNumAdd}}</div>
                  <span v-if="formVip.payersNumAdd > 0">+{{formVip.payersNumAdd}}</span>
                  <span v-else>{{formVip.payersNumAdd}}</span>
                </el-tooltip>
                <img v-if="formVip.payersNumAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
                <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
              </p>
            </div>
             <div class="arrowCommon">
               <p><span>支付订单数</span><span></span>
                <el-tooltip class="item" effect="dark" content="统计时间内，成功付款的订单数，一个订单对应唯一一个订单号（不剔除退款订单）" placement="top-start">
                  <span class="why">?</span>
                </el-tooltip>
              </p>
              <p>{{formVip.ordersPaid}}</p>
              <p>
                <span>{{formVip.timeType}}</span>
                <el-tooltip class="item" effect="dark"  placement="top-start">
                  <div slot="content">{{formVip.ordersPaidAdd}}</div>
                  <span v-if="formVip.ordersPaidAdd > 0">+{{formVip.ordersPaidAdd}}</span>
                  <span v-else>{{formVip.ordersPaidAdd}}</span>
                </el-tooltip>
                <img v-if="formVip.ordersPaidAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
                <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
              </p>
            </div>
             <div class="arrowCommon">
              <p><span>支付金额(元)</span><span></span>
                <el-tooltip class="item" effect="dark" content="统计时间内，所有支付订单金额之和（不剔除退款金额）" placement="top-start">
                  <span class="why">?</span>
                </el-tooltip>
              </p>
              <p>{{formVip.payAmount}}</p>
              <p>
                <span>{{formVip.timeType}}</span>
                <el-tooltip class="item" effect="dark"  placement="top-start">
                  <div slot="content">{{formVip.payAmountAdd}}</div>
                  <span v-if="formVip.payAmountAdd > 0">+{{formVip.payAmountAdd}}</span>
                  <span v-else>{{formVip.payAmountAdd}}</span>
                </el-tooltip>
                <img v-if="formVip.payAmountAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
                <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
              </p>
            </div>
            <div class="arrowCommon">
              <p><span>客单价</span><span></span>
                <el-tooltip class="item" effect="dark" content="统计时间内，付款金额/付款人数" placement="top-start">
                  <span class="why">?</span>
                </el-tooltip>
              </p>
              <p>{{formVip.unitPrice}}</p>
              <p>
                <span>{{formVip.timeType}}</span>
                <el-tooltip class="item" effect="dark"  placement="top-start">
                  <div slot="content">{{formVip.unitPriceAdd}}</div>
                  <span v-if="formVip.unitPriceAdd > 0">+{{formVip.unitPriceAdd}}</span>
                  <span v-else>{{formVip.unitPriceAdd}}</span>
                </el-tooltip>
                <img v-if="formVip.unitPriceAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
                <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="arrow">
          <div class="big-arrow"></div>
          <div class="order-arrow"></div>
          <div class="pay-arrow"></div>
          <div class="big-word g-flex-column-leftCenter"><span>{{formVip.conversionRate}}%</span><span>访问-支付</span><span>转换率</span></div>
          <div class="order-word g-flex-column-leftCenter"><span>70%</span><span>访问-下单</span><span>转换率</span></div>
          <div class="pay-word g-flex-column-leftCenter"><span>70%</span><span>下单-支付</span><span>转换率</span></div>
        </div> -->
      </div>
      <div class="vip-ecahrts">
        <Echart chartId="vipMyline" :seriesData="seriesDataVip" :xData="xaxisVip"/>
      </div>
    </div>
    <!--交易构成-->
    <div class="trade">
      <div class="header">
        <div class="left"><span>交易构成</span></div>
        <div  class="right">
          <div>统计时间：</div>
          <el-select v-model="tradeDate.dateMode" placeholder="时间" size="small" class="day" @change="changeTradeTime">
            <el-option v-for="item in dayOptions" :label="item.message" :value="item.code" :key="item.code"></el-option>
          </el-select>
          <el-date-picker class="picker" v-if="tradeDate.dateMode === 1" size="small" :picker-options="pickerOptions" :clearable="false" v-model="tradeDate.dateValue" type="date" placeholder="选择日期" @change="handleTradeDay"  value-format="yyyy-MM-dd"></el-date-picker>
          <el-date-picker size="small" v-if="tradeDate.dateMode === 2" :disabled="true" v-model="tradeDate.dateSenev" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker size="small" v-if="tradeDate.dateMode === 3" :disabled="true" v-model="tradeDate.dateMon" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-date-picker class="picker" v-if="tradeDate.dateMode === 4" size="small" :picker-options="pickerOptionsMon" :clearable="false" type="month" v-model="tradeDate.dateValue" placeholder="选择月" @change="handleTradeMon" value-format="yyyy-MM"></el-date-picker>
        </div>
      </div>
      <div class="content g-flex-c">
        <div class="trade-left g-flx-center">
          <div>
            <span>成交客户构成</span>
            <el-tooltip class="item" effect="dark"  placement="top-start">
              <div slot="content">新成交客户数：在统计时间内首次在油站付款的客户人数（不剔除退款订单）。<br/>老成交客户数：在统计时间内再次付款的客户数（不剔除退款订单）。</div>
              <span class="why">?</span>
            </el-tooltip>
          </div>
          <div>
            <Circles id="cirlce" :data="dataOrder"/>
          </div>
          <div><span>老成交客户</span><span>新成交客户</span></div>
        </div>
        <div class="trade-right">
          <div class="table">
            <div class="table-wrap">
              <span class="table-title"></span><span class="table-title">支付金额(元)</span><span class="table-title">支付人数</span>
              <span>新成交客户</span><span>{{formTrade.newCustomersAmount}}</span><span>{{formTrade.newCustomersNum}}</span>
              <span>老成交客户</span><span>{{formTrade.oldCustomersAmount}}</span><span>{{formTrade.oldCustomersNum}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllGasInfoList, getDateMode, getMemberProfile, getMemberTransactions, getTransactionComposition } from '@api/member'
import Card from './components/card'
import Circles from './components/circle'
import Echart from './components/line'
import moment from 'moment'
import { mapActions } from 'vuex'
export default {
  name: 'vipPool_vipAnalyse',
  data () {
    return {
      cumulativeMembers: '', // 会员概况小提示
      dayOptions: [], // 所有自然日选择下拉框数据
      cardOptions: [], // 卡片数据循环
      overViewDate: {
        dateMode: '', // 会员概况的日期类型
        dateValue: '', // 会员概况的日期选择
        dateSenev: [], // 会员概况近七天
        dateMon: [], // 会员概况近30天
      },
      vipDate: {
        dateMode: '', // 会员交易概况的日期类型
        dateValue: '', // 会员交易概况的日期选择
        dateSenev: [], // 会员交易概况近七天
        dateMon: [], // 会员交易概况近30天
      },
      tradeDate: {
        dateMode: '', // 交易构成的日期类型
        dateValue: '', // 交易构成的日期选择
        dateSenev: [], // 交易构成近七天
        dateMon: [], // 交易构成近30天
      },
      formData: {
        gasId: undefined,
        gasName: undefined
      },
      oilStationOptions: [], // 油站的下拉框
      membershipGrowth: [], // 会员概况总的echarts数据
      seriesDataOverview: [], // 会员概况的echarts数据
      xaxisOverview: [], // 会员概况的x坐标
      titleOverview: '', // 会员概况的title
      formVip: {}, // 会员交易概况--
      seriesDataVip: [], // 会员交易概况echarts--
      xaxisVip: [], // 会员交易概况X坐标--
      dataOrder: [], // 交易构成饼状图数据
      formTrade: {}, // 交易构成数据
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() - 3600 * 1000 * 24
        }
      },
      pickerOptionsMon: {
        disabledDate(time) {
          let startTime = moment().endOf('month').format('YYYY-MM-DD')
          return time.getTime() > new Date(startTime).getTime() - 3600 * 1000 * 24
        }
      }
    }
  },
  components: {
    Card,
    Echart,
    Circles
  },
  methods: {
    ...mapActions('vipPool', {'setId': 'setId'}),
    // 切换油站，所有的数据全部更换
    changeOil (val) {
      // 默认赋值自然日
      this.overViewDate.dateMode = 1
      this.overViewDate.dateValue = moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD")
      this.vipDate.dateMode = 1
      this.vipDate.dateValue = moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD")
      this.tradeDate.dateMode = 1
      this.tradeDate.dateValue = moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD")
      this.getMemberProfileApi({ gasId: val, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 获取会员概况 
      this.getMemberTransactionsApi({ gasId: val, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 会员交易概况
      this.getTransactionCompositionApi({ gasId: val, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 会员交易概况
    },
    // 会员概览点击切换不同的卡片更换数据
    handleChangeCard (type) {
      // 1-新增会员数 2-会员支付订单数 3-会员支付总金额 4-会员平均加油升数 5-会员平均客单价
     this.setId(type)
     switch (type) {
      case 1:
        {
          const data = this.membershipGrowth.yaxis.length > 0 ? this.membershipGrowth.yaxis.filter(item => item.type === 1)[0].yaxis: []
          this.titleOverview = '新增会员数量'
          this.changeOverviewEcharts('新增会员数量', data)
        }
      break
      case 2:
        {
          const data = this.membershipGrowth.yaxis.length > 0 ? this.membershipGrowth.yaxis.filter(item => item.type === 2)[0].yaxis : []
          this.titleOverview = '会员支付订单数'
          this.changeOverviewEcharts('会员支付订单数', data)
        }
      break
      case 3:
        {
          const data = this.membershipGrowth.yaxis.length > 0 ? this.membershipGrowth.yaxis.filter(item => item.type === 3)[0].yaxis: []
          this.titleOverview = '会员支付总金额'
          this.changeOverviewEcharts('会员支付总金额', data)
        }
      break
      case 4:
        {
          const data = this.membershipGrowth.yaxis.length > 0 ? this.membershipGrowth.yaxis.filter(item => item.type === 4)[0].yaxis : []
          this.titleOverview = '会员平均加油升数'
          this.changeOverviewEcharts('会员平均加油升数', data)
        }
      break
      case 5:
        {
          const data = this.membershipGrowth.yaxis.length > 0 ? this.membershipGrowth.yaxis.filter(item => item.type === 5)[0].yaxis : []
          this.titleOverview = '会员平均客单价'
          this.changeOverviewEcharts('会员平均客单价', data)
        }
      break
     }
    },
    // 会员概览切换卡片，echarts数据切换方法
    changeOverviewEcharts (name, data) {
      this.seriesDataOverview = [
        {
          name: name,
          data: data,
          borderColor: '#3074FF',
          colorStops:['rgba(48, 116, 255, 0.8)','rgba(48, 116, 255, 0.1)']
        }
      ]
    },
    // 会员概览切换日期类型
    changeOverviewTiem (val) {
      switch (val) {
        case  1:
          this.overViewDate.dateValue = moment(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD")
         break
        case  2:
          this.overViewDate.dateSenev = [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  3:
          this.overViewDate.dateMon = [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  4:
          this.overViewDate.dateValue = moment(new Date()).format("YYYY-MM") 
        break
      }
      this.getMemberProfileApi({ gasId: this.formData.gasId, dateMode: this.overViewDate.dateMode, dateValue: this.overViewDate.dateValue })
    },
    // 会员概览日期切换
    handleOvewviewDay (val) {
      this.getMemberProfileApi({ gasId: this.formData.gasId, dateMode: this.overViewDate.dateMode, dateValue: val })
    },
    // 会员概览月份切换
    handleOvewviewMon (val) {
      this.getMemberProfileApi({ gasId: this.formData.gasId, dateMode: this.overViewDate.dateMode, dateValue: val })
    },
    // 会员交易概览切换日期类型
    changeVipTime (val) {
      switch (val) {
        case  1:
          this.vipDate.dateValue = moment(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD")
         break
        case  2:
          this.vipDate.dateSenev = [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  3:
          this.vipDate.dateMon = [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  4:
          this.vipDate.dateValue = moment(new Date()).format("YYYY-MM") 
        break
      }
      this.getMemberTransactionsApi({ gasId: this.formData.gasId, dateMode: this.vipDate.dateMode, dateValue: this.vipDate.dateValue })
    },
    // 会员交易概览日期切换
    handleVipDay (val) {
      this.getMemberTransactionsApi({ gasId: this.formData.gasId, dateMode: this.vipDate.dateMode, dateValue: val })
    },
    // 会员交易概览月份切换
    handleVipMon (val) {
      this.getMemberTransactionsApi({ gasId: this.formData.gasId, dateMode: this.vipDate.dateMode, dateValue: val })
    },
    // 交易构成切换日期类型
    changeTradeTime (val) {
      switch (val) {
        case  1:
          this.tradeDate.dateValue = moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD")
         break
        case  2:
          this.tradeDate.dateSenev = [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  3:
          this.tradeDate.dateMon = [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date().getTime() - 3600 * 1000 * 24]
         break
        case  4:
          this.tradeDate.dateValue = moment(new Date()).format("YYYY-MM") 
        break
      }
      this.getTransactionCompositionApi({ gasId: this.formData.gasId, dateMode: this.tradeDate.dateMode, dateValue: this.tradeDate.dateValue })
    },
    // 会员交易概览日期切换
    handleTradeDay (val) {
      this.getTransactionCompositionApi({ gasId: this.formData.gasId, dateMode: this.tradeDate.dateMode, dateValue: val })
    },
    // 会员交易概览月份切换
    handleTradeMon (val) {
      this.getTransactionCompositionApi({ gasId: this.formData.gasId, dateMode: this.tradeDate.dateMode, dateValue: val })
    },
    // 获取该用户名下所有的油站
    async getAllGasInfoListApi () {
      try {
        const { code, result } = await getAllGasInfoList()
        if (code !== 200) return
        this.oilStationOptions = result || []
        this.formData.gasId =  this.oilStationOptions[0].gasId
        this.formData.gasName =  this.oilStationOptions[0].gasName
        // 默认赋值自然日
        this.overViewDate.dateMode = 1
        this.overViewDate.dateValue = moment(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD")
        this.vipDate.dateMode = 1
        this.vipDate.dateValue = moment(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD")
        this.tradeDate.dateMode = 1
        this.tradeDate.dateValue = moment(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD")
        this.getMemberProfileApi({ gasId: this.formData.gasId, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 获取会员概况 
        this.getMemberTransactionsApi({ gasId: this.formData.gasId, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 会员交易概况
        this.getTransactionCompositionApi({ gasId: this.formData.gasId, dateMode: 1, dateValue: moment(new Date().getTime() - 3600 * 1000 * 24).format("YYYY-MM-DD") }) // 会员交易概况
      } catch (err) {
        console.log(err)
      }
    },
    // 获取筛选条件天数选择
    async getDateModeApi () {
      try {
        const { code, result = [] } = await getDateMode()
        if (code !== 200) return
        this.dayOptions = result
      } catch (err) {
        console.log(err)
      }
    },
    // 会员概况的接口数据
    async getMemberProfileApi (params) {
      try {
        const { code, result } = await getMemberProfile(params)
        if (code !== 200) return
        const { timeCode, compareData, cumulativeMembers, membershipGrowth } = result
        this.cumulativeMembers = cumulativeMembers // 会员概况的数字提示
        this.membershipGrowth = membershipGrowth // 会员概况总echarts
        this.xaxisOverview = membershipGrowth.xaxis
        this.seriesDataOverview = membershipGrowth.yaxis.length > 0 ? membershipGrowth.yaxis.filter(item => item.type === 1)[0].yaxis : []
        this.titleOverview = '新增会员数'
        this.changeOverviewEcharts('新增会员数' ,this.seriesDataOverview)
        // 给所有的卡片确认type
        compareData.forEach((item) => {
          switch (timeCode) {
            case 1:
              item.timeType = "较前一天"
            break
            case 2:
              item.timeType = "较前七天"
            break
            case 3:
              item.timeType = "较前30天"
            break
            case 4:
              item.timeType = "较前一个月"
            break
          }
        })
        this.cardOptions = compareData // 卡片的数据
        this.setId(this.cardOptions[0].type) // 第一个默认选中
      } catch (err) {
        console.log(err)
      }
    },
    // 会员交易概况接口数据
    async getMemberTransactionsApi (params) {
      try {
        const { code, result } = await getMemberTransactions(params)
        if (code !== 200) return
        const { timeCode, visitorsNum, visitorsNumAdd, payersNum, payersNumAdd, ordersPaid, ordersPaidAdd, payAmount, payAmountAdd, unitPrice, unitPriceAdd, conversionRate, payGrowthList } = result
        this.formVip =  { timeCode, visitorsNum, visitorsNumAdd, payersNum, payersNumAdd, ordersPaid, ordersPaidAdd, payAmount, payAmountAdd, unitPrice, unitPriceAdd, conversionRate, payGrowthList }
        // const { orders, payUsers, visitPayRate, xaxis } = payGrowthList 临时注释
        const { orders, payUsers, xaxis } = payGrowthList
        this.seriesDataVip = [
          { name: '支付订单数', data: orders,  borderColor: '#FF2A27', colorStops:['rgba(255, 143, 143, 0.8)','rgba(255, 42, 39, 0.1)'] },
          { name: '支付金额', data: payGrowthList.payAmount,   borderColor: '#3074FF', colorStops:['rgba(48, 116, 255, 0.8)','rgba(48, 116, 255, 0.1)'] },
          { name: '支付人数', data: payUsers, borderColor: '#AFFF2C', colorStops:['rgba(175, 255, 44, 0.9)','rgba(175, 255, 44, 0.1)'] },
          // { name: '访问-支付转换率', data: visitPayRate, borderColor: '#FF6F02', colorStops:['rgba(255, 192, 0, 0.9)','rgba(255, 111, 2, 0.1)'] }
        ]
        this.xaxisVip = xaxis
        switch (timeCode) {
          case 1:
            this.formVip.timeType = "较前一天"
          break
          case 2:
            this.formVip.timeType = "较前七天"
          break
          case 3:
            this.formVip.timeType = "较前30天"
          break
          case 4:
            this.formVip.timeType = "较前一个月"
          break
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 交易构成接口数据
    async getTransactionCompositionApi (params) {
      try {
        const { code, result } = await getTransactionComposition(params)
        if (code !== 200) return
        const { newCustomersAmount, newCustomersNum, oldCustomersAmount, oldCustomersNum  } = result
        this.formTrade = { newCustomersAmount, newCustomersNum, oldCustomersAmount, oldCustomersNum }
        this.dataOrder = [{ value: newCustomersNum, name: '新成交客户', itemStyle: { color: '#3074FF' } }, { value: oldCustomersNum, name: '老成交客户', itemStyle: { color: '#26EA9C' } }]
      } catch (err) {
        console.log(err)
      }
    }
  },
  mounted () {
    this.getAllGasInfoListApi()
    this.getDateModeApi()
  }
}
</script>
<style scoped lang="less">
.wrap{
  width: 100%;
}
.overview{
  width: 100%;
  padding: 20px 20px;
  margin-top: 10px;
  // height: 675px;
  background: #FFFFFF;
  border-radius: 1px;
  .oil{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
  }
  .header{
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex:1;
      height: 50px;
      line-height: 50px;
      >span:nth-child(1) {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
      }
      >span:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FA6400;
        margin-left: 15px;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .day{
        width: 94px;
        margin-right:10px;
      }
      .picker{
        width: 137px;
        margin-right:10px;
      }
    }
  }
  .card{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .echart{
    margin-top: 50px;
  }
}
.vip{
  width: 100%;
  padding: 20px 20px;
  margin-top: 10px;
  background: #fff;
  border-radius: 1px;
 .header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex:1;
      height: 50px;
      line-height: 50px;
      >span:nth-child(1) {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
      }
      >span:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FA6400;
        margin-left: 15px;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .day{
        width: 94px;
        margin-right:10px;
      }
      .picker{
        width: 137px;
        margin-right:10px;
      }
    }
  }
  .vip-trade{
    width: 100%;
    margin-top: 20px;
  }
  .people{
    width: 80%;
    // height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    >div{
      width: 100%;
      height: 164px;
    }
    .people-custom {
      width: 100%;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-green.png') no-repeat;
      background-size: 100%;
    }
    .people-order {
      width: 99%;
      display: flex;
      justify-content: flex-start;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-zi.png') no-repeat;
      background-size: 100%;
    }
    .people-pay {
      width: 98%;
      display: flex;
      justify-content: flex-start;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-pink.png') no-repeat;
      background-size: 100%;
    }
  }
  .arrow{
    width: 240px;
    height: 300px;
    position: relative;
    .big-arrow{
      position: absolute;
      width: 180px;
      height: 300px;
      left: -10px;
      // border: 1px solid #ff0;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-bigArrow.png') no-repeat;
      background-size: 100% 99%;
    }
    .order-arrow{
      position: absolute;
      width: 20%;
      height: 200px;
      top: 50px;
      // left: -32px;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/iocn-greenaArrow.png') no-repeat;
      background-size: 100% 99%;
    }
    .pay-arrow{
      position: absolute;
      width: 20%;
      height: 200px;
      top: 270px;
      // left: -32px;
      background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-orderArrow.png') no-repeat;
      background-size: 100% 99%;
    }
    .big-word{
      position: absolute;
      top: 100px;
      left: 175px;
      width:80px;
      height: 80px;
      >span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #817CAD;
      }
      >span:nth-child(1){
        font-size: 21px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #817CAD;
      }
    }
    .order-word{
      position: absolute;
      top: 100px;
      left: 55px;
      width:80px;
      height: 80px;
      >span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #8DD5CA;
      }
      >span:nth-child(1){
        font-size: 21px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #8DD5CA;
      }
    }
    .pay-word{
      position: absolute;
      top: 300px;
      left: 55px;
      width:80px;
      height: 80px;
      >span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #D29CA0;
      }
      >span:nth-child(1){
        font-size: 21px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #D29CA0;
      }
    }
  }
  .vip-ecahrts{
    margin-top: 50px;
  }
}
.trade{
  width:100%;
  padding: 20px 20px;
  margin-top: 10px;
  background: #FFFFFF;
  border-radius: 1px;
 .header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex:1;
      height: 50px;
      line-height: 50px;
      >span:nth-child(1) {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
      }
      >span:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FA6400;
        margin-left: 15px;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .day{
        width: 94px;
        margin-right:10px;
      }
      .picker{
        width: 137px;
        margin-right:10px;
      }
    }
  }
  .content {
    width: 100%;
    height: 361px;
    .trade-left{
      width: 35%;
      height: 100%;
      >div:nth-child(1){
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        .why{
          display: inline-block;
          width: 21px;
          height: 21px;
          font-size: 14px;
          color: #808080;
          border:1px solid #ccc;
          border-radius: 50%;
          text-align: center;
          line-height: 21px;
          cursor: pointer;
        }
      }
      >div:nth-child(2){
        width: 200px;
        height: 200px;
      }
      >div:nth-child(3){
        width: 50%;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        >span:nth-child(1) {
          position: relative;
          padding-left: 15px;
          &::before{
            content: "";
            display: block;
            position: absolute;
            top: 5px;
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #26EA9C;
          }  
        }
        >span:nth-child(2) {
          position: relative;
          padding-left: 15px;
          &::before{
            content: "";
            display: block;
            position: absolute;
            top: 5px;
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #3074FF;
          }  
        }
      }
    }
    .trade-right{
      width: 65%;
      height: 100%;
      .table{
        width: 100%;
        margin-top: 130px;
        padding: 10px 30px;
        .table-wrap{
          width: 100%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;
          >span{
            width: 33.3%;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #EBEEF5;
          }
          .table-title{
            background: #F5F7FA;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }
}
.arrowCommon{
    width: 20%;
    height: 80%;
    padding: 10px 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    >p{
      margin: 0;
      padding: 0;
    }
    >p:nth-child(1) {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #808080;
      .why{
        display: inline-block;
        width: 21px;
        height: 21px;
        border:1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 21px;
        cursor: pointer;
      }
    }
    >p:nth-child(2) {
      font-size: 30px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    >p:nth-child(3) {
      display: flex;
      align-items: center;
      >span:nth-child(1){
        display: inline-block;
        max-width: 70px;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
        >span:nth-child(2){
        display: inline-block;
        width: 48px;
        max-width: 48px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #710000;
      }
        >img{
        display: inline-block;
        width: 14px;
        height: 14px;
      }
    }
  }
.item {
  margin: 4px;
}
</style>